<!DOCTYPE html>
<html>
<body>
<p>Test that the scrollbars of a visibility:hidden overflow:auto DIV do not participate in hit testing - <a href="http://crbug.com/313908">http://crbug.com/313908</a></p>

<div id="result">FAIL: script didn't run to completion.</div>

<div id="div1" style="position: absolute; top: 100px; width: 100px; height: 340px; background-color: Pink; overflow: auto;">
<div id="div1Content" style="width: 100%; height: 500px;">
    Div 1
</div>
</div>
<div id="div2" style="position: absolute; top: 120px; width: 100px; height: 300px; background-color: Gold; overflow: auto; z-index: 1;">
<div id="div2Content" style="width: 200%; height: 500px;">
    Div 2
</div>
</div>

<script>

    if (window.testRunner)
        testRunner.dumpAsText();

    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    // First sanity check points that should be within div2's vertical and horizontal scrollbars
    // when it's visible.
    // Subtract 5px from the right (bottom) edge to get a point within the vertical (horizontal) scrollbar.
    var verticalPoint = [div2.offsetLeft + div2.offsetWidth - 5, div2.offsetTop + Math.floor(div2.offsetHeight / 2)];
    var horizontalPoint = [div2.offsetLeft + Math.floor(div2.offsetWidth / 2), div2.offsetTop + div2.offsetHeight - 5];
    var elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
    var elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
    if (elem.id != div2.id || elem2.id != div2.id) {
        document.getElementById("result").firstChild.data = "FAILURE: The element at points (" + verticalPoint + ") and (" + horizontalPoint + ") needs to be div2. You may need to turn on overflow scrollbars temporarily. (On Mac: Change the 'Show scroll bars' setting to 'Always'.)";
    } else {
        // Hide div2 by applying visibility:hidden and re-check.
        div2.style.visibility = "hidden";

        elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
        elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);

        if (elem.id != div1.id) {
            document.getElementById("result").firstChild.data = "FAILURE: The element at point (" + verticalPoint + ") should be div1.";
        } else if (elem2.id != div1.firstElementChild.id) {
            document.getElementById("result").firstChild.data = "FAILURE: The element at point (" + horizontalPoint + ") should be div1Content.";
        } else {
            document.getElementById("result").firstChild.data = "SUCCESS";
        }
    }

</script>
</body>
</html>
